import React, { useEffect, useRef, useState } from 'react';
import { Button, Form, Input, Space, Table, TableColumnsType } from 'antd';

import api from '../../api/index';
import { IDept } from '../../types/api';
import { formatDateToChinese } from '../../utils/index';
import CreateDept from './CreateDept';

//部门管理
const Dept: React.FC = () => {
  const [data, setData] = useState<IDept[]>([]);
  const [form] = Form.useForm();
  //弹框实例
  const deptRef = useRef<{
    openModal: () => void;
  }>(null);

  //调接口获取数据
  useEffect(() => {
    getDeptData();
  }, []);

  //获取部门列表
  const getDeptData = async () => {
    const data = await api.getDeptList(form.getFieldsValue());
    setData(data);
  };
  const columns: TableColumnsType<IDept> = [
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
      width: 200,
    },
    {
      title: '负责人',
      dataIndex: 'userName',
      key: 'userName',
      width: 150,
    },
    {
      title: '创建时间',
      dataIndex: 'createId',
      key: 'createId',
      width: 150,
      render: (text) => {
        return formatDateToChinese(text);
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 150,
      render: (text) => {
        return formatDateToChinese(text);
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (text, record) => {
        console.log('text', text);
        return (
          <Space>
            <Button
              type='primary'
              onClick={() => {
                handleSubCreate(record._id);
              }}
            >
              新增
            </Button>
            <Button
              type='primary'
              onClick={() => {
                handleEditCreate(record._id);
              }}
            >
              编辑
            </Button>
            <Button
              danger
              onClick={() => {
                handleDelete(record._id);
              }}
            >
              删除
            </Button>
          </Space>
        );
      },
    },
  ];

  //新增
  const handleSubCreate = (id: string) => {
    console.log('新增', id);
  };
  //编辑
  const handleEditCreate = (id: string) => {
    console.log('编辑', id);
  };
  //删除
  const handleDelete = (id: string) => {
    console.log('删除', id);
  };

  //重置
  const handleReset = () => {
    form.resetFields();
    getDeptData();
  };

  const handleCreate = () => {
    console.log('新增');
    deptRef.current?.openModal();
  };
  return (
    <div>
      <Form className='search-form' form={form} layout='inline'>
        <Form.Item name='deptName' label='部门名称'>
          <Input placeholder='请输入部门名称' />
        </Form.Item>
        <Form.Item>
          <Button type='primary' className='mr10' onClick={getDeptData}>
            查询
          </Button>
          <Button type='primary' htmlType='submit' onClick={handleReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
      <div className='wrap_table'>
        <div className='header'>
          <h1 className='title'>部门列表</h1>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
          </div>
        </div>
        <Table columns={columns} dataSource={data} rowKey={'_id'} />
      </div>
      <CreateDept mref={deptRef} update={getDeptData} />
    </div>
  );
};

export default Dept;
